<!-- 角色下拉选择 -->
<template>
  <el-select
    v-model="formData[prop]"
    :placeholder="placeholder"
    clearable
    filterable
    @change="selectChange"
  >
    <el-option
      v-for="op in options"
      :key="op.id"
      :label="op.name"
      :value="op.id"
    />
  </el-select>
</template>

<script>
import { roleRoles } from '@/api/common'
export default {
  name: 'RoleSelect',
  props: {
    formData: {
      type: Object,
      required: true
    },
    prop: {
      type: [Array, String],
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      options: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      roleRoles().then(res => {
        const { data } = res
        this.options = data
      })
    },
    selectChange (val) {
      this.$emit('event-change', val)
    }
  }
}
</script>
